<template>
    <div class="home" >
        <d2-grid-layout v-bind="layout" @layout-updated="layoutUpdatedHandler">
            <!-- dragable searchBar/可拖拽 -->
            <d2-grid-item v-bind="layout.layout[0]" @resize="resizeHandler" @move="moveHandler" @resized="resizedHandler" @moved="movedHandler">
                <crm-filter></crm-filter>
            </d2-grid-item>

            <!-- table/表格 -->
            <d2-grid-item v-bind="layout.layout[1]" @resize="resizeHandler" @move="moveHandler" @resized="resizedHandler" @moved="movedHandler">
                <crm-table></crm-table>
            </d2-grid-item>

            <!-- Message preview area/信件预览区 -->
            <d2-grid-item v-bind="layout.layout[4]" @resize="resizeHandler" @move="moveHandler" @resized="resizedHandler" @moved="movedHandler" class="bg-white">
                <div class="pl-10">信件预览区域</div>
            </d2-grid-item>


            <!-- Quick reply template/快捷回信模板 -->
            <d2-grid-item v-bind="layout.layout[3]" @resize="resizeHandler" @move="moveHandler" @resized="resizedHandler" @moved="movedHandler" class="bg-white">
                <crm-InfoTemp @setTemplate="setTemplate"></crm-InfoTemp>
            </d2-grid-item>

            <!-- Reply area/回信区域 -->
            <d2-grid-item v-bind="layout.layout[5]" @resize="resizeHandler" @move="moveHandler" @resized="resizedHandler" @moved="movedHandler" class="bg-white">
                <d2-quill style="min-height: 200px; margin-bottom: 20px;" v-model="letterValue"/>
            </d2-grid-item>


            <!-- Historical mail area/历史信件区 -->
            <d2-grid-item v-bind="layout.layout[6]" @resize="resizeHandler" @move="moveHandler" @resized="resizedHandler" @moved="movedHandler" class="bg-white">
                <div  class="pl-10">历史信件区</div>
            </d2-grid-item>

            <!-- Historical orders/历史订单 -->
            <d2-grid-item v-bind="layout.layout[7]" @resize="resizeHandler" @move="moveHandler" @resized="resizedHandler" @moved="movedHandler" class="bg-white">
                <div  class="pl-10">历史订单区域</div>
            </d2-grid-item>

            <!-- History order side preview mail area bar/侧边预览信件区域栏 -->
            <d2-grid-item v-bind="layout.layout[2]" @resize="resizeHandler" @move="moveHandler" @resized="resizedHandler" @moved="movedHandler">
                <crm-rightSide></crm-rightSide>
            </d2-grid-item>
        </d2-grid-layout>
    </div>
</template>

<script>
    import Vue from 'vue'
    import { GridLayout, GridItem } from 'vue-grid-layout'
    import d2quill from "../../components/d2-quill"
    import crmTable from "./crm-table"
    import crmFilter from "./crm-filter.vue"
    import crmInfoTemp from "./crm-InfoTemp.vue"
    import crmRightSide from "./crm-rightSide"

    export default {
        components: {
            "d2-quill": d2quill,
            "d2-grid-layout": GridLayout,
            "d2-grid-item": GridItem,
            crmTable,
            crmFilter,
            crmInfoTemp,
            crmRightSide
        },
        data() {
            return {
                TEST: "test",
                openSide: false,
                value: "",
                layout: {
                    layout: [
                        { x: 0, y: 0, w: 12, h: 2, i: '0' }, //headerLay
                        { x: 0, y: 2, w: 9, h: 10, i: '1' }, //mainLay
                        { x: 9, y: 2, w: 3, h: 25, i: '3', dragIgnoreFrom: 'div' }, //Message display in sidebar/侧边栏信件显示
                        { x: 0, y: 17, w: 9, h: 5, i: '2' }, //Quick reply template/快捷回信模板
                        { x: 0, y: 12, w: 9, h: 5, i: '4' }, //Letter writing area/写信区域
                        { x: 0, y: 22, w: 9, h: 5, i: '5', dragIgnoreFrom: 'p' }, //Letter writing area/写信区域
                        { x: 0, y: 27, w: 9, h: 5, i: '6' }, //Historical mail area历史信件区
                        { x: 9, y: 27, w: 3, h: 12, i: '7' }, // Historical orders历史订单
                    ],
                    colNum: 12,
                    rowHeight: 30,
                    isDraggable: true,
                    isResizable: true,
                    isMirrored: false,
                    verticalCompact: true,
                    responsive: true,
                    margin: [10, 10],
                    useCssTransforms: true,
                    letterValue:"",//letterValue
                },
            }
        },
        mounted() {
            this.showInfo()
        },
        methods: {
            log(arg1 = 'log', ...logs) {
                if (logs.length === 0) {
                    console.log(arg1)
                } else {
                    console.group(arg1)
                    logs.forEach(e => {
                        console.log(e)
                    })
                    console.groupEnd()
                }
            },
           
            layoutUpdatedHandler(newLayout) {
                console.group('layoutUpdatedHandler')
                newLayout.forEach(e => {
                    console.log(`{'x': ${e.x}, 'y': ${e.y}, 'w': ${e.w}, 'h': ${e.h}, 'i': '${e.i}'},`)
                })
                console.groupEnd()
            },
            resizeHandler(i, newH, newW) {
                this.log('resizeHandler', `i: ${i}, newH: ${newH}, newW: ${newW}`)
            },
            moveHandler(i, newX, newY) {
                this.log('moveHandler', `i: ${i}, newX: ${newX}, newY: ${newY}`)
            },
            resizedHandler(i, newH, newW, newHPx, newWPx) {
                this.log('resizedHandler', `i: ${i}, newH: ${newH}, newW: ${newW}, newHPx: ${newHPx}, newWPx: ${newWPx}`)
            },
            movedHandler(i, newX, newY) {
                this.log('movedHandler', `i: ${i}, newX: ${newX}, newY: ${newY}`)
            },
            setTemplate(e){
                console.log(e)
                this.letterValue = e
                this.$forceUpdate()
            }
        }
    }
</script>
<style lang="less">
    @import url('~@css/crm.less');
</style>